<template>
  <div class="index ">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin">任务管理</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/renwuexcel">数据报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/peoexcel">人员报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/yingxiaoexcel">营销任务报表</router-link>
              <router-link class="powertopli " to="/callsystem/newcalls/guanlizhongxin/addpeo">外呼人员管理</router-link>
              <router-link class="powertopli teamlei" to="/callsystem/newcalls/guanlizhongxin/addphone">外呼号码管理</router-link>
            </div>
          </div>
        </div>
        
        <div class="con">
          <el-button type="danger" style="background-color: #2974FF;" @click="adddig" round >添加号码</el-button>
          <div  class="t_search_box" style="padding-bottom: 0;margin-top: 20px;">
            <el-input style="width: 240px;" class="t_search_input" v-model.trim="formInline.mobile" placeholder="请输入号码"></el-input>
            <el-button type="danger" style="margin-left: 10px;" @click="clearbtn" plain round >清空</el-button>
            <el-button type="danger" style="background-color: #2974FF;" @click="searchbtn" round >搜索</el-button>
          </div>
          <div>
            <el-table
            v-loading='loading'
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="mobile"
                align="center"
                label="号码">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="添加时间">
              </el-table-column>
              <el-table-column
                prop="remark"
                align="center"
                label="备注">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="是否风控">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_risk==1">是</span>
                  <span v-else>否</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="风控接口">
                <template slot-scope="scope">
                  <span v-if="scope.row.risk_type==1">天津赛卡尔</span>
                  <span v-if="scope.row.risk_type==2">卡卡外呼卡</span>
                </template>
              </el-table-column>
              <el-table-column
                prop=""
                align="center"
                label="操作">
                <template slot-scope="scope">
                  
                  <el-button v-if="scope.row.is_risk==1" style="margin-left: 10px;" type="text" @click="resfengkong(scope.row)" >取消风控</el-button>
                  <el-button v-else style="margin-left: 10px;" type="text" @click="addfengkong(scope.row)" >加入风控</el-button>
                  <el-button style="margin-left: 10px;" type="text" @click="del(scope.row.id)" >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="formInline.pageSize"
                layout="total,prev, pager, next"
                :total="total"
                prev-text="上一页" next-text="下一页">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加号码"
      :visible.sync="isshowadd"
      width="488px">
      <div class="t_search_box" >
        <div style="display: flex;align-items: center;">
          <span style="color: #2974FF;margin-right: 5px;">*</span>
          <el-input style="width: 100%;" class="t_search_input" v-model.trim="addform.mobile" placeholder="请输入号码"></el-input>
        </div>
        <div style="display: flex;align-items: center;margin-top: 15px;margin-bottom: 15px;">
          <span style="color: white;margin-right: 5px;">*</span>
          <el-input style="width: 100%;" class="t_search_input" v-model.trim="addform.remark" placeholder="备注"></el-input>
        </div>
        <div style="display: flex;align-items: center;">
          <span style="color: white;margin-right: 5px;">*</span>
          <el-select style="width: 100%;" clearable  v-model="addform.risk_type" filterable placeholder="选择风控接口">
          <el-option  label="天津赛卡尔" :value="1"></el-option>
          <el-option  label="卡卡外呼卡" :value="2"></el-option>
        </el-select>
        </div>
        
        
      </div>
      <div style="text-align: right;">
        <el-button plain round @click="isshowadd = false">取 消</el-button>
        <el-button type="danger" round style="background-color: #2974FF;" @click="sureadd">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="加入风控"
      :visible.sync="isshowaddfk"
      width="488px">
      <div class="t_search_box" >
       
        <el-select style="width: 100%;" clearable  v-model="addfkid" filterable placeholder="选择风控接口">
          <el-option  label="天津赛卡尔" :value="1"></el-option>
          <el-option  label="卡卡外呼卡" :value="2"></el-option>
        </el-select>
      </div>
      <div style="text-align: right;">
        <el-button plain round @click="isshowaddfk = false">取 消</el-button>
        <el-button type="danger" round style="background-color: #2974FF;" @click="sureaddfk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";
 

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,
     
    },
    name: 'quanyi',
    data() {
      return {
        
        shopid:'',
        formInline:{
          mobile:'',
          page:1,
          pageSize:20
        },
        tableData: [],
        total:0,
        loading:false,
        isshowadd:false,
        nowpeo:'',
        peolist:[],
        iscanadd:true,
        nowchoose:'',
        isshowaddfk:false,
        addfkid:'',
        addform:{
          mobile:'',
          remark:'',
          risk_type:'',
        }
      
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()
      //列表
      this.getpeolist()
   
     
    },
    methods: {
      getpeolist(){
        
      
        axios.get('/api/plan-market/get/user/list')
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('人')
              console.log(response)
              this.peolist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){
        
      
        this.loading = true
        axios.get('/api/plan-market/call/mobile/list/v2',{params:{
          page:this.formInline.page,
          page_size:this.formInline.pageSize,
          mobile:this.formInline.mobile
        }})
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              
              
            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading=false
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
 
      adddig(){
        this.isshowadd = true
        this.addform.mobile = ''
        this.addform.remark = ''
        this.addform.risk_type = ''
      },
      del(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/call/mobile/del/v2',{
              id:id
            
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
            
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      resfengkong(item){
        this.$confirm('是否确认取消风控?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/call/mobile/risk/v2',{
              id:item.id,
              is_risk:0
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
            
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      addfengkong(item){
        this.nowchoose = item
        this.addfkid = ''
        this.isshowaddfk = true
      },
      sureaddfk(){
        axios.post('/api/plan-market/call/mobile/risk/v2',{
              id:this.nowchoose.id,
              is_risk:1,
              risk_type:this.addfkid
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
            
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
              this.isshowaddfk = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        
      },
      sureadd(){
        if(!this.addform.mobile){
          this.$message.error('请填写号码');
          return
        }
        if(this.iscanadd){
          this.iscanadd = false
          axios.post('/api/plan-market/call/add/mobile/v2',this.addform)
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.isshowadd = false
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
              this.iscanadd = true
            })
        }
        
      },
      clearbtn(){
        this.formInline.mobile = ''
      }
      

    
    
   
      
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>
    .team .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .team .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
      padding-top: 0;
    }
    .team .teamlei {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #f4f4f4;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#f4f4f4 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line2{
    
      background-color:white ;
     
    }
    .t_under_line_lei{
      
      background-color:#2974FF ;
     
    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    .t_search_box{
      padding-bottom: 20px;
    }
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}
    .fenline{
      background-color: #f4f4f4;
      height: 10px;
    }
    .el-button--danger:hover{
      background-color: #2974FF;
    }
</style>
